<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>rg2001</h1>

    <input id="btn" type="button" value="send">
</body>
<script>
    // ajax 浏览器提供出来的一个模块!!!
    // ajax请求是需要客户端与服务器是同源的! 如果不同源则会产生跨域问题！
    // 如何解决跨域: 1.让他们同源  2.服务器允许跨域
    window.onload=function(){
        var btn = document.querySelector("#btn");
        // btn.addEventListener("click",()=>{})
        btn.onclick=function(){
            //创建xhr
            var xhr = new XMLHttpRequest();
            //给xhr添加load事件(当一个XMLHttpRequest请求完成的时候会触发load 事件)
            xhr.addEventListener("load", function () {
                console.log(this.responseText);
            });
            //指定接口的信息
            xhr.open("GET", "http://127.0.0.1:8080/api/blog/list");
            //发送请求
            xhr.send();
        }
    }
</script>
</html>